<template>
  <div class="map">
    <div class="text">国内疫情地图</div>
    <div class="box">
      <van-tabs v-model="active" @change="change">
        <van-tab title="现存确诊">
          <div id="main" style="width: 100%;height:8rem;"></div>
        </van-tab>
        <van-tab title="累计确诊">
          <div id="main1" style="width: 100%;height:8rem;"></div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import 'echarts/map/js/china'
import api from '@/api/index'
export default {
  data(){
    return{
      newArr:[],
      nowArr:[],
      active:0,
    }
  },
created() {
  api.getChinaData()
  .then(res=>{
    var arr=res.data
    for(var i=0;i<arr.length;i++){
      var obj1={}
      var obj2={}
      obj1.name=arr[i].provinceName
      obj1.value=arr[i].currentConfirmedCount
      obj2.name=arr[i].provinceName
      obj2.value=arr[i].confirmedCount
      this.newArr.push(obj1)
      this.nowArr.push(obj2)
    }
    this.$nextTick(()=>{
      this.chinaMap(this.newArr,'main',0)
    })
  })
},
  methods:{
  chinaMap(data,id,type){
    var myChart=this.$echarts.init(document.getElementById(id))
    var option={
      tooltip:{
        triggerOn:'click',
        enterable:true,
        formatter(item){
          if(type==0){
            return '<a href="#/city/'+item.name+'/0" style="color: white">'+item.name+'现存确诊'+item.value+'</a>';
          }else{
            return '<a href="#/city/'+item.name+'/1" style="color: white">'+item.name+'累计确诊'+item.value+'</a>';
          }
        }
      },
      visualMap:[{
        orient:'vertical',
        type:'piecewise',
        itemWidth:14,
        bottom:0,
        pieces:[
          {
            min:0,
            max:0,
            color:'rgb(226,235,244)'
          },
          {
            min:1,
            max: 9,
            color: 'rgb(255,242,207)'
          },
          {
            min:10,
            max: 99,
            color: 'rgb(255,206,160)'
          },
          {
            min:100,
            max: 499,
            color: 'rgb(255,165,119)'
          },
          {
            min:500,
            max: 999,
            color: 'rgb(255,99,65)'
          },
          {
            min:1000,
            max: 9999,
            color: 'rgb(255,39,54)'
          },
          {
            min:10000,
            color: 'rgb(222,31,5)'
          },
        ]
      }],
      series:[{
        name:'省',
        type:'map',
        map:'china',
        roam:false,
        zoom:1.2,
        aspectScale:0.75,
        top:40,
        layoutCenter:['5%','5%'],
        label:{
          normal:{
            show:true,
            textStyle:{
              fontSize:8
            }
          }
        },
        itemStyle:{
          normal: {
            areaColor:'rgba(0,255,236,0)',
            borderColor:'rgba(0,0,0,0.2)'
          },
          emphasis:{
            areaColor: 'rgba(255,180,0,0.8)',
            shadowOffsetX:0,
            shadowOffsetY:0,
            shadowBlur:20,
            borderWidth:0
          }
        },
        data
      }]
    }
    myChart.setOption(option)
  },
    change(title){
    if(title==1){
      this.$nextTick(()=>{
        this.chinaMap(this.nowArr,'main1',1)
      })
    }
    }
  }
}
</script>

<style lang="less" scoped>
.map{
  background-color: #ffffff;
  padding: 10px 0;
    .text{
      border-left: 4px solid orange;
      margin-left: 20px;
      padding: 0 10px;
    }
  .box{
    /deep/ .van-tabs__line {
      background-color: orange;
    }
  }
}
</style>

